
<template>
  <div class="commentTalkIndex">
    <userHeader />
    <div class="breadClum">
      <span>
           <router-link :to="{path:'/pageIndex'}"> <a class="bread1">当前位置：首页  >  </a></router-link>
         <router-link :to="{path:'/query'}">  <a class="bread2">综合查询  ></a></router-link>
         <a class="bread2">评价底稿查询</a>
      </span>
    </div>
    <!--<div class="navList">-->
      <!--&lt;!&ndash;评价企业&ndash;&gt;-->
      <!--<el-dropdown trigger="click" style="cursor:pointer;background: #8cc34b;padding:10px 24px;color:#fff;border-radius:4px;width: 80px;text-align: center;"-->
                   <!--@command="handleCommentCompany">-->
          <!--<span class="el-dropdown-link">-->
            <!--{{commentCompany}}<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
          <!--</span>-->
        <!--<el-dropdown-menu slot="dropdown" style="padding: 0 20px;">-->
          <!--<el-dropdown-item :command="0">武汉纺友</el-dropdown-item>-->
          <!--<el-dropdown-item :command="1">武汉纺友1</el-dropdown-item>-->
          <!--<el-dropdown-item :command="2">武汉纺友2</el-dropdown-item>-->
        <!--</el-dropdown-menu>-->
      <!--</el-dropdown>-->

      <!--&lt;!&ndash;评价期间&ndash;&gt;-->
      <!--<el-button type="primary" style="margin-right: 6px;" @click="showCommentPeriod">评价期间</el-button>-->
      <!--<el-dialog-->
        <!--title="请选择要查询的时期"-->
        <!--:visible.sync="isShowCommentPeriod"-->
        <!--width="30%"-->
        <!--style="min-width: 412px;">-->
        <!--<el-date-picker-->
          <!--v-model="commentPeriod"-->
          <!--type="daterange"-->
          <!--range-separator="至"-->
          <!--start-placeholder="开始日期"-->
          <!--end-placeholder="结束日期">-->
        <!--</el-date-picker>-->
        <!--<span slot="footer" class="dialog-footer">-->
            <!--<el-button type="primary" @click="selectCommentPeriod">确 定</el-button>-->
          <!--</span>-->
      <!--</el-dialog>-->


      <!--&lt;!&ndash;评价类型&ndash;&gt;-->
      <!--<el-dropdown trigger="click" style="cursor:pointer;background: #8cc34b;padding:10px 24px;color:#fff;border-radius:4px;width: 80px;text-align: center;"-->
                   <!--@command="handleCommentType">-->
          <!--<span class="el-dropdown-link">-->
            <!--{{commentType}}<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
          <!--</span>-->
        <!--<el-dropdown-menu slot="dropdown" style="padding: 0 20px;">-->
          <!--<el-dropdown-item :command="0">年度评价</el-dropdown-item>-->
          <!--<el-dropdown-item :command="1">hello</el-dropdown-item>-->
          <!--<el-dropdown-item :command="2">测试中</el-dropdown-item>-->
        <!--</el-dropdown-menu>-->
      <!--</el-dropdown>-->
      <!--<el-button @click="downLoadFile" :loading="downloadLoading" class="download-file" style="" type="primary" icon="el-icon-download" size="mini"></el-button>-->
    <!--</div>-->
    <div class="navList">
      <el-dropdown  trigger="click" @command="setCompanySelect" style="cursor:pointer;background: #8cc34b;padding:10px 24px;color:#fff;border-radius:4px;text-align: center;">
          <span class="el-dropdown-link">
            {{companySelect}}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
        <el-dropdown-menu slot="dropdown" style="padding: 0 10px;height: 300px;overflow-y: scroll">
          <el-dropdown-item v-for="item in companyList" :key="item.company_id" :command="item">{{item.company_name}}
          </el-dropdown-item>
          <el-dropdown-item  v-if="companyList.length==0" command="none">
            暂无数据
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-dropdown  trigger="click" @command="setEvaluationPeriod" style="margin-right: 6px;cursor:pointer;background: #8cc34b;padding:10px 24px;color:#fff;border-radius:4px;text-align: center;" >
          <span class="el-dropdown-link">
            {{evaluationPeriodSelect}}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
        <el-dropdown-menu slot="dropdown" style="padding: 0 10px;height: 300px;overflow-y: scroll">
          <el-dropdown-item v-for="item in evaluationPeriodList" :command="item.evaluation_period"
                            :key="item.evaluation_period">{{item.evaluation_period}}年
          </el-dropdown-item>
          <el-dropdown-item  v-if="evaluationPeriodList.length==0" command="none">
            暂无数据
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-dropdown trigger="click" style="cursor:pointer;background: #8cc34b;padding:10px 24px;color:#fff;border-radius:4px;text-align: center;"
                   @command="handleCommentType">
          <span class="el-dropdown-link">
            {{commentType}}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
        <el-dropdown-menu slot="dropdown" style="padding: 0 10px;height: 300px;overflow-y: scroll">
          <el-dropdown-item  v-for="item in evaluationType" :command="item"
                             :key="item.evaplan_type_id">{{item.evaplan_type_name}}</el-dropdown-item>
          <el-dropdown-item  v-if="evaluationType.length==0" command="noCommentType">
            暂无数据
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

      <!--评价流程-->
      <el-dropdown trigger="click" style="cursor:pointer;background: #8cc34b;padding:10px 24px;color:#fff;border-radius:4px;text-align: center;"
                   @command="handleCommentProgress">
          <span class="el-dropdown-link">
            {{commentProgress}}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
        <el-dropdown-menu slot="dropdown" style="padding: 0 10px;height: 300px;overflow-y: scroll">
          <el-dropdown-item :command="item" v-for="item in commentProgressArray" :key="item.process_id">{{item.process_name}}</el-dropdown-item>
          <el-dropdown-item  v-if="commentProgressArray.length==0" command="noCommentType">
            暂无数据
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <!--<el-button @click="downLoadFile" :loading="downloadLoading" class="download-file" style="" type="primary" icon="el-icon-download" size="mini"></el-button>-->
    </div>
    <el-table
      :data="tableData"
      :height="height"
      stripe>
      <el-table-column
        prop="numrow"
        label="编号"
        width="136">
      </el-table-column>
      <el-table-column
        prop="control_title"
        label="评价点"
        width="275">
      </el-table-column>
      <el-table-column
        label="适用底稿类型">
        <el-table-column
          prop="samplerecord"
          label="抽样表单底稿"
          width="148">
        </el-table-column>
        <el-table-column
          prop="sceneinspectrecords"
          label="现场检查底稿"
          width="148">
        </el-table-column>
        <el-table-column
          prop="interviewsrecord"
          label="评价访谈底稿"
          width="148">
        </el-table-column>
        <el-table-column
          prop="mergerecord"
          label="穿行测试底稿"
          width="148">
        </el-table-column>
      </el-table-column>
      <el-table-column
        label="操作"
        width="160">
        <template slot-scope="scope">
          <a :href="scope.row.evaplandraft" class="read">查看</a>
          <a :href="scope.row.evaplandraft" :download="scope.row.evaplandraft" class="downloadImg">下载</a>
        </template>
      </el-table-column>
      <el-table-column>
      </el-table-column>
    </el-table>

    <vue-preview :slides="slideList" @close="handleClose"></vue-preview>

    <!--分页器-->
    <div class="pagination">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="page"
        :page-size="limit"
        background
        layout="prev, pager, next, jumper"
        :page-count="pages">
      </el-pagination>
    </div>
  </div>
</template>
<script>
  import userHeader from '@/components/header.vue';
  import {mapState} from 'vuex';
  export default({
    computed:{
      ...mapState({
        height:state=>sessionStorage.getItem('height')||state.app.height,
      }),
    },
    data(){
      return {
        companySelect:'评价企业',
        commentCompany:"评价企业",
        evaluationPeriodSelect: '评价期间',
        commentType:"评价类型",
        commentProgress:"评价流程",
        commentPeriod:'',//评价期间的时间段
        isShowCommentPeriod:false,//评价期间  时间选择
        downloadLoading:false,
        tableData:[],
        companyList: [],
        evaluationPeriodList: [],
        evaluationType:[],
        commentProgressArray:[],
        loading:true,
        companySelectId:'',
        EvaluationPeriodId:'',
        commentTypeId:'',
        processId:'',
        page:1,
        limit:10,
        pages:1,
        slideList:[] //预览图片
      }
    },
    components:{
      userHeader,
    },
    methods:{
      handleClose () {
        console.log('close event')
      },
      operationFile(url,flag){
        if(url!=''){
          window.location.href = url
        }else{
          var title = flag== 1?"看":"下载";

          this.$alert("此处无文件可"+title,"提示")
        }

      },
      getCompanyList() {
        this.axios.get('/api/v1/enquiry/companyflat')
          .then((res) => {
            var companyList = [];
            if (res.data.code == 0) {
              console.log((res.data.data))
              this.companyList = this.formatSonCompany(res.data.data)
              console.log(this.companyList)
            }
          })
      },
      //将公司列表树状结构转化为数组
      formatSonCompany(data) {
        var temp = [], list = [];

        function copySonCompany(obj) {
          temp = [...temp, obj]
          if (obj.son_company.length > 0) {
            obj.son_company.forEach(element => {
              copySonCompany(element)
            })
          }
          return temp
        }

        data.forEach(el => {
          list = [...list, ...copySonCompany(el)]
        })
        return list
      },
      //评价企业
      handleCommentCompany(command){
        console.log(command)
      },
      //评价期间选择弹出
      showCommentPeriod(){
        this.isShowCommentPeriod = true;
      },
      //评价期间选择关闭
      selectCommentPeriod(){
        this.isShowCommentPeriod = false;
      },
      //评价类型选择
      handleCommentType(command){
        console.log(command)
        if(command=='noCommentType'){
          return false
        };
        this.loading= true;
        this.commentTypeId=command.evaplan_type_id;
        this.commentType =command.evaplan_type_name;
        this.commentProgress='评价流程';
        this.initData(this.page,this.companySelectId,this.EvaluationPeriodId,this.commentTypeId);
        this.initLcProgress(this.companySelectId,this.EvaluationPeriodId,this.commentTypeId)
      },

      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
      },
      //选择公司
      setCompanySelect(command) {
        if(command=='none'){
          return false
        };
        this.companySelect = command.company_name;
        this.companySelectId = command.company_id;
        this.commentProgressArray=[];
        this.evaluationPeriodSelect='评价期间';
        this.commentType='评价类型';
        this.commentProgress='评价流程';
        this.commentTypeId='';
        this.EvaluationPeriodId='';
        this.initData(this.page,this.companySelectId,this.EvaluationPeriodId,this.commentTypeId,this.processId);
        this.loading =true;
        this.getCompanyEvaluationPeriod(command.company_id).then(res => {
          console.log(res.data.data)
          if (res.data.code == 0) {
            this.evaluationPeriodList = res.data.data
          }
        });

        //获取评价类型
        this.axios.get('/api/v1/enquiry/evaplantypequery',{
          params:{
            company_id:this.companySelectId,
          }
        }).then((res)=>{
          if(res.data.code==0){
            this.evaluationType =res.data.data;
          }
        })
      },
      getCompanyEvaluationPeriod(company_id) {
        return this.axios.get('/api/v1/flow/controlindicators?company_id=' + company_id)
      },
      //选择期间
      setEvaluationPeriod(command) {
        if(command=='none'){
          return false
        };
        this.evaluationPeriodSelect = command;
        this.EvaluationPeriodId =command;
        this.commentTypeId='';
        this.commentType='评价类型';
        this.commentProgress='评价流程';
        this.loading= true;
        this.initData(this.page,this.companySelectId,this.EvaluationPeriodId,this.commentTypeId,this.processId);
        this.axios.get('/api/v1/enquiry/evaplantypequery',{
          params:{
            company_id:this.companySelectId,
            evaluation_period:this.evaluationPeriodSelect
          }
        }).then((res)=>{
          if(res.data.code==0){
            this.evaluationType =res.data.data;
          }
        })
      },

      //评价流程选择
      handleCommentProgress(command){
        if(command=='noCommentType'){
          return false
        };
        this.loading =true;
        this.processId=command.process_id;
        this.commentProgress =command.process_name;
        this.initData(this.page,this.companySelectId,this.EvaluationPeriodId,this.commentTypeId,this.processId);
      },
      handleCurrentChange(val) {
        console.log(val);
        this.page = val;
        this.initData(this.page,this.companySelectId,this.EvaluationPeriodId,this.commentTypeId,this.processId);
        // this.getTableDataByCondition(this.handleStaffId,this.operationPeriodFormat,this.limit,this.currentPage)
      },
      initData(page,company_id,evaluation_period,evaplan_type_id,process_id){
        // /api/v1/enquiry/evaplandraftquery?company_id=5&evaluation_period=2019&evaplan_type_id=50&process_id=2&limit=10&page=1
        this.axios.get('/api/v1/enquiry/evaplandraftquery',{
          params:{
            limit:10,
            page:this.page,
            company_id:company_id,
            evaluation_period:evaluation_period,
            evaplan_type_id,evaplan_type_id,
            process_id:process_id,
          }
        }).then((res)=>{
            console.log(res.data);
            if(res.data.code==0){
              this.loading =false;
              this.tableData=res.data.data;
              this.total = res.data.pagination.total
              this.pageSize =res.data.pagination.pages;
              this.currentPage=parseInt(res.data.pagination.page)
            }
          })
      },
      initLcProgress(company_id,evaluation_period,evaplan_type_id){
        this.axios.get('/api/v1/enquiry/topprocess',{
          params:{
            company_id:this.companySelectId,
            evaluation_period:this.EvaluationPeriodId,
            evaplan_type_id:this.commentTypeId
          }
        })
          .then((res)=>{
            console.log(res.data);
            this.commentProgressArray =res.data.data;
          });
      },
    },
    mounted(){
      this.getCompanyList();
      this.initData(this.page,this.companySelectId,this.EvaluationPeriodId,this.commentTypeId,this.processId);
    }
  })
</script>
<style scoped="">
  .commentTalkIndex{
    width: 100%;
    height: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px;
  }
  .read{
    color:#e5b00a;
  }
  .downloadImg{
    color:#4f7bba;
  }
  .commentTalkIndex .download-file {
    margin-right: 36px;
    margin-top: 14px;
    float: right;
    padding: 7px 8px;
    background: #769dd6;
    border: none;
    font-size: 20px;
    text-align: center;
    cursor: pointer;
  }
  .commentTalkIndex>>> .navList{
    padding-bottom:12px;
    margin-bottom:12px;
  }
  .commentTalkIndex>>> .navList>div{
    background:none;
  }
  @media screen and (max-width: 1400px) {
     .commentTalkIndex{
       padding: 6px;
     }
  }
</style>

